<template>
  <div class="oa-container">
    <el-card class="approval-list">
      <template #header>
        <div class="module-header">
          <div class="header-left">
            <el-icon><Tickets /></el-icon>
            <span>待办审批</span>
          </div>
          <div class="header-actions">
            <el-button type="success" @click="handleAddFlow">
              <el-icon><SetUp /></el-icon>添加审批流
            </el-button>
            <el-button type="primary" @click="handleNewApproval">
              <el-icon><Plus /></el-icon>发起审批
            </el-button>
          </div>
        </div>
      </template>

      <el-tabs v-model="activeTab" class="approval-tabs">
        <el-tab-pane label="待我审批" name="todo">
          <el-table :data="approvalList" style="width: 100%">
            <el-table-column prop="title" label="审批事项" min-width="200">
              <template #default="{ row }">
                <div class="approval-title">
                  <el-tag :type="row.type">{{ row.typeText }}</el-tag>
                  <span>{{ row.title }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="applicant" label="申请人" width="120" />
            <el-table-column prop="createTime" label="申请时间" width="180" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status === 'pending' ? 'warning' : 'success'">
                  {{ row.status === 'pending' ? '待审批' : '已审批' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleApprove(row)">
                  审批
                </el-button>
                <el-button type="primary" link @click="handleView(row)">
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="我发起的" name="mine">
          <!-- 与待我审批类似的表格结构 -->
        </el-tab-pane>
        <el-tab-pane label="已审批" name="done">
          <!-- 与待我审批类似的表格结构 -->
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 添加审批流对话框 -->
    <el-dialog
      v-model="flowDialogVisible"
      title="添加审批流"
      width="600px"
    >
      <el-form :model="flowForm" label-width="100px">
        <el-form-item label="审批流名称">
          <el-input v-model="flowForm.name" placeholder="请输入审批流名称" />
        </el-form-item>
        <el-form-item label="审批类型">
          <el-select v-model="flowForm.type" placeholder="请选择审批类型" style="width: 100%">
            <el-option label="请假审批" value="leave" />
            <el-option label="报销审批" value="expense" />
            <el-option label="出差审批" value="travel" />
          </el-select>
        </el-form-item>
        <el-form-item label="审批节点">
          <div class="flow-nodes">
            <div v-for="(node, index) in flowForm.nodes" :key="index" class="flow-node">
              <div class="node-content">
                <span class="node-index">{{ index + 1 }}</span>
                <el-select v-model="node.type" placeholder="节点类型" style="width: 120px">
                  <el-option label="主管审批" value="manager" />
                  <el-option label="总审批" value="director" />
                  <el-option label="HR审批" value="hr" />
                </el-select>
                <el-button type="danger" link @click="removeNode(index)">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </div>
              <div class="node-arrow" v-if="index < flowForm.nodes.length - 1">
                <el-icon><ArrowDown /></el-icon>
              </div>
            </div>
            <el-button type="primary" link @click="addNode">
              <el-icon><Plus /></el-icon>添加节点
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="flowDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveFlow">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Tickets, Plus, SetUp, Delete, ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const activeTab = ref('todo')
const router = useRouter()

// 模拟审批数据
const approvalList = ref([
  {
    id: 1,
    title: '请假申请',
    type: 'primary',
    typeText: '请假',
    applicant: '张三',
    createTime: '2024-01-18 10:30:00',
    status: 'pending'
  },
  {
    id: 2,
    title: '报销申请',
    type: 'success',
    typeText: '报销',
    applicant: '李四',
    createTime: '2024-01-18 09:15:00',
    status: 'pending'
  },
  {
    id: 3,
    title: '出差申请',
    type: 'warning',
    typeText: '出差',
    applicant: '王五',
    createTime: '2024-01-17 16:45:00',
    status: 'pending'
  }
])

const handleNewApproval = () => {
  ElMessage.info('发起新审批')
}

const handleApprove = (row) => {
  ElMessage.success(`正在审批：${row.title}`)
}

const handleView = (row) => {
  ElMessage.info(`查看审批详情：${row.title}`)
}

// 添加审批流相关
const flowDialogVisible = ref(false)
const flowForm = ref({
  name: '',
  type: '',
  nodes: [{ type: 'manager' }]
})

const handleAddFlow = () => {
  router.push('/oa/flow-design')
}

const addNode = () => {
  flowForm.value.nodes.push({ type: 'manager' })
}

const removeNode = (index) => {
  flowForm.value.nodes.splice(index, 1)
}

const handleSaveFlow = () => {
  ElMessage.success('审批流添加成功')
  flowDialogVisible.value = false
  // 重置表单
  flowForm.value = {
    name: '',
    type: '',
    nodes: [{ type: 'manager' }]
  }
}
</script>

<style scoped>
.oa-container {
  padding: 20px;
}

.approval-list {
  border-radius: 8px;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
}

.header-left .el-icon {
  font-size: 18px;
  color: #1890ff;
}

.approval-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.el-table) {
  border-radius: 8px;
}

:deep(.el-table th) {
  background: #f5f7fa;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

:deep(.el-table__row) {
  cursor: pointer;
  transition: all 0.3s;
}

:deep(.el-table__row:hover) {
  background: #f5f7fa;
}

.approval-tabs {
  margin-top: -10px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.flow-nodes {
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.flow-node {
  margin-bottom: 8px;
}

.node-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.node-index {
  width: 24px;
  height: 24px;
  background: #1890ff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.node-arrow {
  padding: 8px 0;
  display: flex;
  justify-content: center;
  color: #999;
}

:deep(.el-dialog__body) {
  padding-top: 20px;
}
</style> 